import React, { memo, useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom/index';
import { renderRoutes } from 'react-router-config';

import { Layout, Menu } from '@arco-design/web-react';
import '@arco-design/web-react/dist/css/arco.css';

import { IconSettings,IconMusic,IconFire,IconRobot } from '@arco-design/web-react/icon';
import './index.css';

const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;
const Content = Layout.Content;
const Sider = Layout.Sider;

export default memo(function Set(props) {
  const history = useHistory();
  const [collapsed] = useState(false);
  useEffect(() => { document.title = '设置' }, []);
  return (
    <Layout className='layout-collapse-demo'>
      <Sider collapsed={collapsed} collapsible trigger={null} breakpoint='xl'>
        <Menu
          defaultOpenKeys={['1']}
          defaultSelectedKeys={['0_3']}
          onClickMenuItem={key => history.push(key)}
          style={{ width: '100%',backgroundColor:'00000000' }}
        >
          <SubMenu
            key='1'
            title={<span><IconSettings />基础设置</span>}
          >
            <MenuItem key='/main/set/theme'>主题</MenuItem>
            <MenuItem key='/main/set/work'>work</MenuItem>
          </SubMenu>
          <SubMenu
            key='2'
            title={ <span> <IconMusic />音乐</span>}
          >
            <MenuItem key='/main/set/musicstyle'>音乐风格</MenuItem>
            <MenuItem key='/main/set/musicvoice'>音频大小</MenuItem>
            <MenuItem key='/main/set/musicmodel'>黑胶模式</MenuItem>
          </SubMenu>
          <SubMenu
            key='3'
            title={<span><IconFire />热点</span>
            }
          >
            <MenuItem key='/main/set/hotresorce'>热点来源</MenuItem>
          </SubMenu>
          <SubMenu
            key='4'
            title={ <span><IconRobot />智能助手</span>
            }
          >
            <MenuItem key='/main/set/helper'>小嗨助手</MenuItem>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout>
        <Layout style={{ padding: '0 24px' }}>
          <Content>
            <div className='content'>{renderRoutes(props.route.routes)}</div>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
});
